<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>關於我</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">

<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>

<body>
	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container neck-in">
						<div class="grid_12 neck-in">
                            <div class="logo"><a href="index">Proactive</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li>
									<a href="aboutme?id=${loginMember.memberNO}" class="loginImg">
										<img src="${loginMember.photoPath}">
									</a>
									<ul class="loginDropdown hide">
										<li><a href="aboutme?id=${loginMember.memberNO}">關於我</a></li>
										<li><a href="memberCourse?id=${loginMember.memberNO}">我創作</a></li>		
										<li><a href="collectCourse?id=${loginMember.memberNO}">我收藏</a></li>
										<li><a href="memberCard?id=${loginMember.memberNO}">耶誕卡片</a></li>										
										<li><a href="logout">登出</a></li>
									</ul>
								</li>							
							</ul>
                        </div>
					</div>
				</div>
			</div>
			
			<div class="zoneAll clearfix">
				<div class="zone1 clearfix">
                
                    <div class="personalinformationimg clearfix">
                        <img src="${loginMember.photoPath}">
                    </div>
                    <div class="personalinformationp">
                        <p>${loginMember.name}</p>
                        <p>${loginMember.job}</p>
                        <p>
                            <a href="memberFans?id=${loginMember.memberNO}">
                            	<span class="fansCount" id="fansCount">${loginMember.fansCount}</span>粉絲
                            </a>
                            <a href="memberFollow?id=${loginMember.memberNO}">
                            	${loginMember.followCount}關注
                            </a>
                        </p>
                    </div>

                    <ul class="leftnav">
                        <li class="current">
                            <a href="aboutme?id=${loginMember.memberNO}">
                                <img src="images/aboutme.png">關於我</a>
                        </li>
                        <li>
                            <a href="memberCourse?id=${loginMember.memberNO}">
                                <img alt="" src="images/mycreation.png">我創作</a>
                        </li>
                        <li>
                            <a href="collectCourse?id=${loginMember.memberNO}">
                                <img alt="" src="images/mystar.png">我收藏</a>
                        </li>
                        <li>
                            <a href="memberCard?id=${member.memberNO}">
                                <img alt="" src="images/xmas.png">耶誕卡片</a>
                        </li>
                        <!-- 
                        <li>
                            <a href="membernewswall.html">
                                <img alt="" src="images/mynew.png">動態牆</a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img alt="" src="images/myactivity.png">活動</a>
                        </li> 
                        -->
                    </ul>
                </div>
				<div class="memberRwdnav clearfix">
                    <nav class="primary">
                        <ul class="rightnav">
                            <li>
                                <a href="aboutme?id=${loginMember.memberNO}">
                                    <img src="images/aboutme.png">關於我</a>
                            </li>
                            <li>
                                <a href="memberCourse?id=${loginMember.memberNO}">
                                    <img src="images/mycreation.png">我創作</a>
                            </li>
                            <li>
                                <a href="collectCourse?id=${loginMember.memberNO}">
                                    <img src="images/mystar.png">我收藏</a>
                            </li>                          
                            <li>
                                <a href="memberCard?id=${member.memberNO}">
                                    <img alt="" src="images/mystar.png">耶誕卡片</a>
                            </li> 
                            <!-- 
		                        <li>
		                            <a href="membernewswall.html">
		                                <img alt="" src="images/mynew.png">動態牆</a>
		                        </li>
		                        <li>
		                            <a href="javascript:;">
		                                <img alt="" src="images/myactivity.png">活動</a>
		                        </li> 
		                     -->
                        </ul>
                    </nav>
                </div>
				<div class="zone2 clearfix">
					<div class="membernavhide">
						<div class="title">
                        	<img alt="關於我" src="images/aboutmebig.png">
                       		<span>關於我</span>
                        </div>
                	</div>
					<div class="memberaboutme memberaboutmeNumber clearfix">
						<div class="aboutmeleftnav clearfix">
							<c:if test="${flag!=null && flag}">
								<div class="alertMessage alertGreen">修改密碼成功</div>
							</c:if>
							<c:if test="${flag!=null && !flag}">
								<div class="alertMessage alertRed">修改密碼失敗</div>
							</c:if>
							<h2>修改密碼</h2>
							<form class="grid_4 formPart" id="sendForm" method="post" action="modiPassword">
								<label><input type="password" name="oldPassword" placeholder="請輸入舊密碼" class="textbox key"></label>
								<div></div>
								<label><input type="password" name="password" id="password" placeholder="請輸入新密碼" class="textbox key"></label>
								<div></div>
								<label><input type="password" name="password2" placeholder="請確認新密碼" class="textbox checkpd"></label>
								<div></div>
								
								<a href="aboutme?id=${loginMember.memberNO}">
									<button type="button" class="btn_enter_chg btn_enter_inline">取消</button>
								</a>
								<button class="btn_enter_chg btn_enter_inline">確認修改</button>
							</form>
						</div>

					</div><!-- memberaboutme -->
				</div><!-- zone2 -->
			</div><!-- zoneAll -->	
		</div><!--content -->
		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
 				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
	</div><!-- page -->
<!-- import jquery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>
    <script src="js/listscreen.js"></script>		
	<script src="js/ourjquery.js"></script>	
	<!-- validate -->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh_TW.js"></script>
    <script src="js/additional-methods.js"></script>  
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>	
	<script type="text/javascript" src="js/jquery.mobilemenu.js"></script>
    <script type="text/javascript">
        $(function() {
			$('nav#menu').mmenu();
            $('nav.primary .rightnav').mobileMenu();
            $("#sendForm").validate({
				rules:{
					oldPassword:{
						required:true,
						minlength:6
					},
					password:{
						required:true,
						minlength:6
					},
					password2:{
						required:true,
						minlength:6,
						equalTo:$("#password")
						
					}
				},
				messages:{
					oldPassword:{
	    				required:"請輸入舊密碼",
	    				minlength:"長度不得小於{0}"
	    			},
					password:{
	    				required:"請輸入密碼",
	    				minlength:"長度不得小於{0}"
	    			},
	        		password2:{
	        			required:"請確認密碼",
	        			minlength:"長度不得小於{0}",
	        			equalTo:"密碼輸入不同"
	        		}			
				},
				errorPlacement: function (error, element) {
					element.closest("label").next().append(error);
	    	    	//error.insertAfter(element);
	    	    },
	    	    invalidHandler: function(event, validator) {
	    	    	$("#send").attr("disabled", false);
	    	    }
			});
        });
     </script>
</body>
</html>